{% extends './base.html' %}
{% block title %}分类{% endblock %}
{% block header %}
    <style>
        .label a {
            cursor: pointer;
        }
    </style>
{% endblock %}
{% block footer %}
    <script>
        $(function () {
            const main_list = $('#main-list')
            const more_btn = $('.more-btn')
            var params = {
                page: 1,
            }
            getPostsApi()

            // 获取文章
            function getPostsApi() {
                $ajax.get({
                    url: '/v1/api/posts/',
                    data: params,
                    success: function (res) {
                        if (res.code === 200) {
                            if (res.data) {
                                var html = template('main-item', {"posts": res.data})
                                main_list.append(html)
                            } else {
                                more_btn.parents('.more').remove()
                            }
                        }
                    }
                })
            }

            // more
            more_btn.click(function () {
                params['page']++
                getPostsApi()
            })
            // category
            $('#category-list li').click(function () {
                params['page'] = 1
                params['category'] = $(this).attr('data-pk')
                main_list.empty()
                getPostsApi()
            })

        })
    </script>
{% endblock %}
{% block utils %}
    {% verbatim %}
    <script type="text/html" id="main-item">
        {{ each posts post }}
        <li
                class="media wow bounceInLeft"
                style="visibility: hidden; animation-name: none;"
        >
            <div class="art-img">
                <img
                        class="mr-3"
                        src="{{post.thumbnail}}"
                        alt="Generic placeholder image"
                />
            </div>
            <div class="media-body art-content">
                <h5 class="mt-0 mb-1">
                    <a href="/p/{{ post.pid }}/">{{post.title}}</a>
                </h5>
                <p>{{post.desc}}</p>
                <ul>
                    <li>
                        <a title="{{post.author.username}}{{post.pub_time|timeSince}}发表"
                        ><i class="iconfont icon-time"></i>{{post.pub_time|timeSince}}</a
                        >
                    </li>
                    <li class="d-none d-sm-none d-md-none d-lg-block">
                        <a href="#" title="作者： {{post.author.username}}"
                        ><i class="iconfont icon-090sun"></i>{{post.author.username}}</a
                        >
                    </li>
                    <li>
                        <a title="已有 {{post.like}} 个赞"
                        ><i class="iconfont icon-like"></i>{{post.like}}</a
                        >
                    </li>
                    <li class="d-none d-sm-none d-md-none d-lg-block">
                        <a href="#" title="查看分类"
                        ><i class="iconfont icon-tag"></i>{{post.category.name}}</a
                        >
                    </li>
                </ul>
            </div>
        </li>
        {{ /each }}
    </script>
    {% endverbatim %}
{% endblock %}
{% block main %}
    <!-- category -->
    <div class="row bgc mt-2">
        <div class="new new-right">
            <span><i class="iconfont icon-tag"></i>分类</span>
            <small>Category</small>
        </div>
        <div class="col-md-12">
            <ul class="label" id="category-list">
                {% for category in categories %}
                    <li data-pk="{{ category.id }}">
                        <a title="{{ category.name }}">{{ category.name }}&nbsp;&nbsp;({{ category.post_num }})</a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <!-- articles -->
    <div class="row mt-2 wow fadeInDown">
        <div class="col-md-12 bgc">
            <div class="new">
                <span><i class="iconfont icon-090sun"></i></span>
                <span>最新文章</span>
                <small>New Article</small>
            </div>
        </div>

        <div class="mt-2">
            <ul class="list-unstyled art-list" id="main-list">

            </ul>
        </div>
    </div>
    <!-- more -->
    <div
            class="row mt-2 mb-2 wow fadeInDown more"
            style="visibility: visible;"
    >
        <div class="col-md-12 bgc">
            <button class="more more-btn">
                <span><i class="iconfont icon-refresh"></i></span>
                <span>更多文章</span>
                <span><i class="iconfont icon-refresh"></i></span>
            </button>
        </div>
    </div>
{% endblock %}